// 获取main对象
var mainDiv = document.querySelector('#main')
var httpUrl = 'https://api.apiopen.top/getJoke?page=1&count=10&type=text'

console.log(mainDiv)
// page
var page = 1;
var type = "text"



function getDz(){
	// js的反引号可以包含多行字符串
	
	var httpUrl = 'https://api.apiopen.top/getJoke?page='+page+'&count=10&type='+type
	getAjax(httpUrl,function(res){
		var dzList = res.result;
		dzList.forEach(function(item,i){
			var str = `
			<div class="listItem">
				<div class="listHeader">
					<img src="${item.header}" >
					<div class="nickname">${item.name}</div>
				</div>
				<div class="content">
					<p>${item.text}</p>
				</div>
				<div class="iconList">
					<div class="iconItem">
						<svg class="icon" aria-hidden="true">
							<use xlink:href="#icon-fenxiang"></use>
						</svg>
						<span class="text">转发</span>
					</div>
					<div class="iconItem">
						<svg class="icon" aria-hidden="true">
							<use xlink:href="#icon-liaotian"></use>
						</svg>
						<span class="text">评论</span>
					</div>
					<div class="iconItem">
						<svg class="icon" aria-hidden="true">
							<use xlink:href="#icon-zan"></use>
						</svg>
						<span class="text">点赞</span>
					</div>
				</div>
			</div>
			`
			mainDiv.innerHTML+= str;
		})
		console.log(res)
	})
	
	page++
	
}
getDz()


mainDiv.onscroll = function(event){
	// console.log(event)
	// console.log(mainDiv.clientHeight)
	// console.log(mainDiv.scrollTop)
	// console.log(mainDiv.scrollHeight)
	if((mainDiv.clientHeight+mainDiv.scrollTop)==mainDiv.scrollHeight){
		if(type=='text'){
			getDz()
		}else if(type=="image"){
			getImage()
		}else{
			getVideo()
		}
		
	}
}




function getImage(){
	// js的反引号可以包含多行字符串
	
	var httpUrl = 'https://api.apiopen.top/getJoke?page='+page+'&count=10&type='+type
	getAjax(httpUrl,function(res){
		var dzList = res.result;
		dzList.forEach(function(item,i){
			var str = `
			<div class="listItem">
				<div class="listHeader">
					<img src="${item.header}" >
					<div class="nickname">${item.name}</div>
				</div>
				<div class="content">
					<img src="${item.images}" >
				</div>
				<div class="iconList">
					<div class="iconItem">
						<svg class="icon" aria-hidden="true">
							<use xlink:href="#icon-fenxiang"></use>
						</svg>
						<span class="text">转发</span>
					</div>
					<div class="iconItem">
						<svg class="icon" aria-hidden="true">
							<use xlink:href="#icon-liaotian"></use>
						</svg>
						<span class="text">评论</span>
					</div>
					<div class="iconItem">
						<svg class="icon" aria-hidden="true">
							<use xlink:href="#icon-zan"></use>
						</svg>
						<span class="text">点赞</span>
					</div>
				</div>
			</div>
			`
			mainDiv.innerHTML+= str;
		})
		console.log(res)
	})
	
	page++
	
}

function getVideo(){
	// js的反引号可以包含多行字符串
	
	var httpUrl = 'https://api.apiopen.top/getJoke?page='+page+'&count=10&type='+type
	getAjax(httpUrl,function(res){
		var dzList = res.result;
		dzList.forEach(function(item,i){
			var str = `
			<div class="listItem">
				<div class="listHeader">
					<img src="${item.header}" >
					<div class="nickname">${item.name}</div>
				</div>
				<div class="content">
					<video controls="controls" src="${item.video}" />
				</div>
				<div class="iconList">
					<div class="iconItem">
						<svg class="icon" aria-hidden="true">
							<use xlink:href="#icon-fenxiang"></use>
						</svg>
						<span class="text">转发</span>
					</div>
					<div class="iconItem">
						<svg class="icon" aria-hidden="true">
							<use xlink:href="#icon-liaotian"></use>
						</svg>
						<span class="text">评论</span>
					</div>
					<div class="iconItem">
						<svg class="icon" aria-hidden="true">
							<use xlink:href="#icon-zan"></use>
						</svg>
						<span class="text">点赞</span>
					</div>
				</div>
			</div>
			`
			mainDiv.innerHTML+= str;
		})
		console.log(res)
	})
	
	page++
	
}


// 获取对应的点击对象
var dzDiv = document.querySelector("#dz")
var imageDiv = document.querySelector("#image")
var videoDiv = document.querySelector("#video")

dzDiv.onclick = function(){
	type = 'text'
	page = 1;
	mainDiv.innerHTML = "";
	getDz()
}
imageDiv.onclick = function(){
	type = 'image'
	page = 1;
	mainDiv.innerHTML = ""
	getImage()
}

videoDiv.onclick = function(){
	type = 'video'
	page = 1;
	mainDiv.innerHTML = ""
	getVideo()
}